<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入人员名称" v-model="queryForm.name" size="small" style="width: 130px;" class="mRight10">
          </el-input>
          <el-select v-model="queryForm.type" placeholder="请选择人员类型" @change = "getList(1)">
           <el-option label="全部类型" value=""></el-option>
           <el-option label="巡检类型" value="0"></el-option>
           <el-option label="养护类型" value="1"></el-option>
           <el-option label="验收类型" value="2"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="getList(1)" style="margin-left: 10px;">
            查询
          </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新建人员</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }" max-height="704px">
          <el-table-column prop="name" label="人员名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="department" label="所属部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="mobilePhone" label="联系方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
          <el-table-column property="type" label="类型" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.type)]">
                {{ inspTypeText(scope.row.type) }}
              </label>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;" @click='delFn(scope.row)'>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="insp-page">
        <el-pagination background layout="prev, pager, next" :total="total" @current-change='changePage'>
        </el-pagination>
      </div>
    </div>
    <!--新增编辑模板-->
    <vx-popup :title="dialogTitle" width="880px" @close="cancelFormSubmit" :active.sync="dialogVisible"
      @confirmPopup="handleSubmit" @cancelPopup="cancelFormSubmit">
      <el-radio v-model="type" label="0">巡检类型</el-radio>
      <el-radio v-model="type" label="1">养护类型</el-radio>
      <el-radio v-model="type" label='2'>验收类型</el-radio>
      <div class="content">
        <div class="dep">
          <div class="depT">选择人员</div>
          <el-tree
          ref="tree"
          style="margin-top:30px"
          :render-content="renderContent"
            :data="departArr"
            show-checkbox
            node-key="id"
            @node-click="chooseDep"
            @check="handleNodecheck"
            :props="defaultProps">

          </el-tree>

        </div>
        <div class="per">
          <div class="depT">已选人员</div>
          <!-- <el-checkbox-group v-model="perList" style="display: flex; flex-wrap: wrap;margin-top:30px;margin-left:10px;" disabled>
            <el-checkbox  v-for="(item,index) in children" :key="index" :label="item.name" :value="item.id" @change='checkPeo(item.id)'></el-checkbox>
          </el-checkbox-group> -->
          <ul class="peo">
            <li v-for="(item,index) in children" :key="index" >{{item.name}}</li>
          </ul>
        </div>

      </div>
    </vx-popup>

  </div>
</template>
<script>
  import base from "../../api/base.js"
  export default {
    data() {
      return {
        children:[],
        depList:[],
        perList:[],
        queryForm:{
          name:'',
          type:'',
          pageNum:1,
          pageSize:10
        },
        total:0,
        tmplName: '',
        dialogTitle: "新建人员",
        dialogVisible: false,
        type: '0',
        tableData: [],
        departArr:[],
        peopleArr:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    watch: {

    },
    computed: {

    },
    created(){
      this.getList()

    },
    methods: {
      ajaxFn(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader("app-key", "5ab089ca77014874868482ebb85b424b");
        xhr.onreadystatechange = function() {
          // readyState == 4说明请求已完成
          if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
            // 从服务器获得数据
            callback(this, xhr.responseText);
          }
        };
        xhr.send();
      },
      handleNodecheck(a,b){
        console.log(b.checkedNodes,'bbbbb')
        let j = []
        b.checkedNodes.forEach((item,index)=>{
          if(!item.disabled){
            j.push(item)
          }
        })
        console.log(j)
        // for(let i = j.length-1;i>=0;i--){
        //   b.checkedNodes.splice(j[i],1)
        // }
        this.children = j
      },
      chooseDep(data,node){
        this.node = data
        // console.log(data)
        // this.ajaxFn()
        if(data.type == 5)
        this.$api.personManager.getPeopleList({id:data.id}).then(res=>{
          let res_ = res.data
          if(res_.success){
            if(res_.data.personMap.length){
              this.$set(node.data, 'children', []);
              this.$set(data, 'children', []);
              data.children= res_.data.personMap
            }
          }
        })
      },
      getList(type){
        type == 1 ? this.queryForm.pageNum = 1 : null
        this.$api.personManager.getPersonList(this.queryForm).then(res=>{
          if(res.data.success){
            this.tableData = res.data.data
            this.total = res.data.recordsTotal
          }
        })
      },
      changePage(val){
        this.queryForm.pageNum = val
        this.getList()
        console.log(this.queryForm)
      },
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
      delFn(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$api.personManager.delPeople([row.id]).then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleAdd() {
        this.dialogVisible = true;
        this.getDepArr()
      },
      cancelFormSubmit() {
        this.dialogVisible = false;
      },
      handleSubmit() {
        if(this.children.length){
          this.children.forEach(item=>{
            item.type = this.type
          })
          this.$api.personManager.newPeople(this.children).then(res=>{
            console.log(res)
            if(res.data.success){
              this.$message({
                message: '新建成功',
                type: 'success'
              });
              this.dialogVisible = false;
              this.children = []
              this.getList()
            }
          })
        }else
        this.$message({
            message: '请选择人员',
            type: 'warning'
          });
      },
      getDepArr(){
        this.$api.personManager.getDepartList().then(res=>{
          // console.log(res.data)
          let res_ = res.data
          if(res_.success){
            this.addDis(res_.data)
            console.log(res_.data,'112')
            this.departArr = res_.data
          }
        })
      },
      addDis(data){
        data.forEach(item=>{
          item.disabled = true
          if(item.children)
          this.addDis(item.children)
        })
      },
      renderContent(h, { node }) {
      return (
        <span >
          <span >{node.data.name}</span>
        </span>
      );
    },
      inspTypeClass(type) {
        switch (type) {
          case 0:
            return 'inspTypeA';
          case 1:
            return 'inspTypeB';
          case 2:
            return 'inspTypeC';
        }
      },
      inspTypeText(type) {
        switch (type) {
          case 0:
            return '巡检';
          case 1:
            return '养护';
          case 2:
            return '验收';
        }
      },
    },
  };

</script>
<style scoped lang="scss">
   @import '@/views/inspection/insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F1F5FC;
  }

  .content {
      margin-top: 10px;
    /* width: 100%; */
    height: 320px;
    border-radius: 2px;
    border: 1px solid #C0C5D2;
    position: relative;
  }
  .dep{
    width: 40%;
    height: 100%;
    overflow:auto;
    padding-left: 10px;
    /* display: flex;
    flex-direction: column; */
    border-right: 1px solid #C0C5D2;
  }
  .depT{
    font-size: 16px;
    margin:5px 20px;
    color: #000;
    position: fixed;
    /* margin-bottom: 40px; */
  }
  .per{
    width: 60%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .peo{
    /* display: flex;
    flex-wrap: wrap; */
    margin-top: 40px;
  }
  .peo li{
    margin: 5px 10px;
    display: inline-block
  }

/deep/.vs-popup{
  width:701px!important;
}
/deep/.el-input__inner{
  height: 32px;
}
/deep/.el-input__icon {
  height:115%
}
/* .page {
    margin-top: 20px;
    text-align: center;
  } */
  .insp-table{
    height: 580px;
  }
  .insp{
    height: 85vh;
  }
</style>
